<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns='http://www.w3.org/1999/xhtml' xmlns:c="http://www.xidea.org/ns/lite/core">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
		<title>百度webim联系人分组管理</title>
		<style type="text/css">
			#wrap{
				position:relative;
				padding:1px;
				margin:100px 0 0 200px;
				width:447px;
				height:418px;
				background:url("./images/bg.gif") no-repeat;
			}
			#sort{
				position:absolute;
				top:80px;
				left:160px;
				width:12px;
				height:12px;
				overflow:hidden;
				cursor:pointer;
			}
			#sort.up{
				background:url("./images/up.gif") no-repeat;
			}
			#sort.down{
				background:url("./images/down.gif") no-repeat;
			}
			#container{
				margin:98px 0 0 16px;
				width:411px;
				height:233px;
				overflow-x:hidden;
				overflow-y:auto;
				font-size:12px;
			}
			div.edit, div.normal{
				overflow:hidden;
				zoom:1;
				margin:1px 5px 0 5px;
				width:401px;
				height:27px;
				line-height:28px;
				border-bottom:1px dashed #fff;
			}
			div.normal{
				border-bottom:1px dashed #ccc;
			}
			div.normal img{
				cursor:pointer;
			}
			div.edit{
				background:#feffda;
			}
			div.cell1, div.cell2, div.cell3{
				float:left;
				text-align:center;
			}
			div.cell1{
				padding-left:20px;
				width:191px;
				text-align:left;
			}
			div.cell2{
				width:70px;
			}
			div.cell3{
				width:120px;
			}
			#createDiv{
				margin:20px 0 0 17px;
			}
		</style>
	</head>
	<body>
		<c:client id="teamList">
		  <c:for items="${list}" var="item">
		    <div class="${item.state}">
		      <c:if test="${item.state == 'edit'}">
		        <div class="cell1">
		          <input id="g_${item.id}" value="${item.name}" />
		        </div>
		        <div class="cell2">
		          <button onclick="action.submit(${item.id})">提交</button>
		        </div>
		        <div class="cell3">
		          <button onclick="action.cancel(${item.id})">取消</button>
		        </div>
		      </c:if>
		      <c:else>
		        <div class="cell1">${item.name}</div>
		        <div class="cell2">
		          <img src="images/edit.gif" onclick="action.edit(${item.id})" />
		        </div>
		        <div class="cell3">
		          <img src="images/delete.gif" onclick="action.del(${item.id})" />
		        </div>
		      </c:else>
		    </div>
		  </c:for>
		</c:client>
		<div id="wrap">
			<div id="sort" class="up" onclick="sort(data.list, this.className)"></div>
			<div id="container"></div>
			<div id="createDiv">
				<input type="text" id="name" value="" />
				<input type="button" value="创建分组" onclick="action.create($('name').value);"/>
			</div>
		</div>
		<script type="text/javascript">
		  //<![CDATA[
var data = {
	"list" : [
		{"id" : 1,"name" : "我的分组1"},
		{"id" : 2,"name" : "我的分组2"},
		{"id" : 3,"name" : "我的分组3"},
		{"id" : 4,"name" : "我的分组4"},
		{"id" : 5,"name" : "我的分组5"},
		{"id" : 6,"name" : "我的分组6"},
		{"id" : 7,"name" : "我的分组7"},
		{"id" : 8,"name" : "我的分组8"},
		{"id" : 9,"name" : "我的分组9"},
		{"id" : 10,"name" : "我的分组10"}
	]
}
var action = {
  sort:function(list, inc){
    $("sort").className = inc?"down":"up";
    list.sort(function(a, b){
      return (inc?1:-1)*a.name.localeCompare(b.name);
    });
    render(data);
  },
  create : function(name){
    data.list.push({id: +new Date(),name: name});
    render(data);
  },
  edit : function(id){
    each(data.list, function(value, i){
      data.list[i].state = value.id == id ? "edit" : "normal";
    });
    render(data);
  },
  del : function(id){
    each(data.list, function(value, i){
      if(value.id == id){
        data.list.splice(i,1);
      }
    })
    render(data);
  },
  save : function(id){
    each(data.list, function(value, i){
      if(value.id == id){
        value.name = $("g_" + id).value;
        value.state = "normal";
      }
    });
    render(data);
  },
  cancel : function(id){
    each(data.list, function(value, i){
      data.list[i].state = "normal";
    });
    render(data);
  }
}
function $(id){
  return document.getElementById(id);
}
function each(obj, fn){
  for (var i = 0; i < obj.length; i++) {
     fn.call(obj[i], obj[i], i); 
  }
}
function render(data){
  $("container").innerHTML = teamList(data);
}

window.onload = function(){
	render(data);
}
//]]>
		</script>
	</body>
</html>



